<template>
	<el-row style="margin-bottom: 20px;">
		<el-input placeholder="用户名" v-model="query" style="width: 200px;margin-right: 10px;" />
		<el-button @click="getList">查询</el-button>
		<el-button type="primary" @click="openDialog()">新增</el-button>
	</el-row>
	<el-table :data="tableData" style="width: 100%">
		<el-table-column fixed prop="real_name" label="姓名" width="120" align="center" />
		<el-table-column prop="role_name" label="用户名" width="120" align="center" />
		<el-table-column prop="user_code" label="用户代码" width="150" align="center" />
		<el-table-column prop="user_name" label="用户账号" width="120" align="center" />
		<el-table-column prop="password" label="密码" width="120" align="center" />
		<el-table-column prop="phone" label="手机" width="120" align="center" />
		<el-table-column prop="qq" label="qq" width="100" align="center" />
		<el-table-column prop="email" label="邮箱" width="180" align="center" />
		<el-table-column prop="note" label="备注" width="120" align="center" />
		<el-table-column prop="create_time" label="创建时间" width="180" align="center" />
		<el-table-column label="角色" width="80" align="center">
			<template #default="scope">
				<el-tag v-if="scope.row.role_id == 1" type="danger">管理员</el-tag>
				<el-tag v-if="scope.row.role_id == 2" type="success">会员</el-tag>
				<el-tag v-if="scope.row.role_id == 3" type="info">游客</el-tag>
			</template>
		</el-table-column>
		<el-table-column fixed="right" label="操作" width="120" align="center">
			<template #default="scope">
				<el-button link type="primary" size="small" @click="openDialog(scope.row)">修改</el-button>
				<el-button link type="primary" size="small" @click="handleDelete(scope.row.id)">删除</el-button>
			</template>
		</el-table-column>
	</el-table>
	<div class="pagination"><el-pagination background @current-change="currentChange" layout="prev, pager, next" :total="total"></el-pagination></div>
	<UserDialog ref="dialog" @closeDialog="onCloseDialog($event, getList)" v-if="showDialog"></UserDialog>
</template>

<script setup lang="ts">
import { ElMessage, ElMessageBox } from 'element-plus';
import { getCurrentInstance, ref, nextTick } from 'vue';
import UserDialog from './UserDialog.vue';

import useDialog from '@/hooks/useDialog';
const { dialog, showDialog, openDialog, onCloseDialog } = useDialog;
const { proxy } = getCurrentInstance();
const query = ref('');
const tableData = ref([]);

const page = ref(1);
const total = ref(0);
//初始化获取数据
getList();
function getList() {
	proxy
		.$get('/users', {
			query: query.value,
			page: page.value
		})
		.then(res => {
			console.log(res);
			if (res.code === 200) {
				total.value = res.total;
				tableData.value = res.list;
			}
		});
}

function handleDelete(id) {
	ElMessageBox.confirm('是否确定删除该用户', '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning'
	})
		.then(() => {
			proxy.$post('/users/delete', { id }).then(res => {
				if (res.code === 200) {
					ElMessage({
						type: 'success',
						message: '删除成功'
					});
					getList();
				} else {
					ElMessage.error(res.msg);
				}
			});
		})
		.catch(() => {
			ElMessage({
				type: 'info',
				message: '取消删除'
			});
		});
}
function currentChange(e) {
	page.value = e;
	getList();
}
</script>

<style scoped lang="less">
.pagination {
	display: flex;
	justify-content: flex-end;
	margin-top: 20px;
}
</style>
